<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        table{
            border: 1px solid red;
            margin: 200px auto;
        }
        td{
            width: 160px;
            text-align: center;
        }
        .but{
            background: red;
            
        }
    </style>
</head>
<body>
    <table class="tab">
    </table>
</body>
</html>
<script>
    let tab1 = document.querySelector('.tab')
    let arr = [
  {
    name: 'Jack',
    age: 18,
    gender: '男'
  },{
    name: 'Rose',
    age: 20,
    gender: '女'
  },{
    name: 'Tom',
    age: 22,
    gender: '男'
  },
  {
    name: 'Jack',
    age: 18,
    gender: '男'
  },{
    name: 'Rose',
    age: 20,
    gender: '女'
  },{
    name: 'Tom',
    age: 22,
    gender: '男'
  },
  {
    name: 'Jack',
    age: 18,
    gender: '男'
  },{
    name: 'Rose',
    age: 20,
    gender: '女'
  },{
    name: 'Tom',
    age: 22,
    gender: '男'
  }
]
    var num = arr.map(function(item){
        let i = 0;i++
        console.log(i)
            return `<tr>      
                        <td class="cla">${item.age}</td>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       GGG <td>${item.gender}</td>
                        <td><button class = "but">删除gander</button></td>
                    </tr>`
    }).join('')
    tab1.innerHTML = num
    let butt = document.querySelector('.but')
        cla1 = document.querySelector('.cla')
    butt.onclick = function(){
        console.log('123');
        cla1.innerText = ''
        }
</script>